<template>
  <div class="pc-dash">
    <div class="top">
      <pc-nav @showLogin="showMask"></pc-nav>
    </div>

    <div class="main">
      <router-view :key="$route.fullPath"></router-view>
    </div>
    <div class="pc-footer">
      <div class="footer-wrap">
        <div class="footer-content">
          <div>
            <div :key="ii.label" v-for="ii in qqDataTem">{{ii.label}}</div>
          </div>
          <div>
            <div>
              <div>产品功能</div>
              <div class="footer-link">
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">梦数互动</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">大屏编辑</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">3D功能介绍</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">demo演示</a>
                </div>
              </div>
            </div>
            <div>
              <div>服务支持</div>
              <div class="footer-link">
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">个性定制</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">数据导出</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">现场支持</a>
                </div>
                <div>
                  <a class="jsUrlLink" data-url="home/index" href="javascript:">帮助中心</a>
                </div>
              </div>
            </div>
            <div>
              <div>关于我们</div>
              <div class="footer-link">
                <div>
                  <a
                    @click="toAbout"
                    class="jsUrlLink"
                    data-url="home/index"
                    href="javascript:"
                  >公司介绍</a>
                </div>
                <div>
                  <a
                    @click="toAbout"
                    class="jsUrlLink"
                    data-url="home/index"
                    href="javascript:"
                  >服务协议</a>
                </div>
                <div>
                  <a
                    @click="toAbout"
                    class="jsUrlLink"
                    data-url="home/index"
                    href="javascript:"
                  >招贤纳士</a>
                </div>
              </div>
            </div>
          </div>

          <div class="qr-code-img">
            <div>
              <!--                                <canvas id="qrCode"></canvas>-->
              <img :src="require('../../assets/imgs/gzh.jpg')" alt>
              <!--                                <span class="svg"></span>-->
            </div>
            <div class="gzh">官方公众号</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div style="height: 65px"></div> -->

    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import PcNav from './pcNav';
import * as QRCode from 'qrcode';
export default {
    name: 'dash',
    components: {
        PcNav,
    },
    data() {
        return {
            showmask: false,
            qrCodeUrl: '',
            qqData: [
                { name: '邮箱', value: 'service@office2.cn' },
                { name: '服务QQ', value: '907601418' },
                { name: '梦数互动官方群', value: '22463434' },
            ],
        };
    },
    created() {
        this.createQrcode('http://localhost:9090/#/home');
        let qqData = [];
        this.qqData.forEach(item => {
            qqData.push({ label: item.name }, { label: item.value });
        });
        this.qqDataTem = qqData;
    },
    methods: {
        createQrcode(value) {
            QRCode.toDataURL(value)
                .then(url => {
                    this.qrCodeUrl = url;
                })
                .catch(err => {
                    console.error(err);
                });
        },
        showMask(a) {
            this.showmask = a;
        },
        close() {
            this.showmask = false;
        },
        toAbout() {
            this.$router.push({
                path: '/about',
            });
        },
    },
};
</script>

<style  lang="scss">
.pc-dash {
    height: 100%;
    .top {
        padding: 0;
        background: #ffffff;
    }
    .main {
        padding: 0;
    }
    .pc-footer {
        // height: 340px;
        background: #1c2123;
        .footer-wrap {
            width: 1200px;
            margin: 0 auto;
            padding-top: 46px;
            .footer-content {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #666666;
                padding-bottom: 17px; /*40-18*/
                font-family: 'MSJH';
                & > div:nth-child(1) {
                    width: 20%;
                    & > div:nth-child(odd) {
                        color: #fff;
                        font-size: 18px;
                        padding-bottom: 3px;
                    }
                    & > div:nth-child(even) {
                        color: #666;
                        font-size: 14px;
                        padding-bottom: 20px;
                    }
                }
                & > div:nth-child(2) {
                    width: 60%;
                    display: flex;
                    justify-content: space-around;
                    & > div {
                        color: #fff;
                        font-size: 18px;
                        .footer-link {
                            font-size: 14px;
                            padding-top: 22px;
                            & > div {
                                padding-bottom: 21px;
                                & > a {
                                    color: #666666;
                                }
                            }
                        }
                    }
                }
                & > div:last-of-type {
                    width: 130px;
                    color: #fff;
                    font-size: 18px;
                    text-align: right;
                    & > div {
                        img {
                            width: 130px;
                        }
                    }
                    .gzh {
                        padding-top: 10px;
                        text-align: center;
                    }
                }
            }
        }
        .copy-right {
            color: #666666;
            text-align: center;
            padding: 24px 0;
            font-size: 14px;
            font-family: 'MSJH';
        }
    }

    .login-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: 20;
        background: #000;
    }
}
@media screen and (max-width: 1200px) {
    .pc-dash {
        .pc-footer {
            .footer-wrap {
                width: 100%;
            }
            .copy-right {
                color: #666666;
                text-align: center;
                padding: 24px 0;
                font-size: 14px;
                font-family: 'MSJH';
            }
        }

        .login-mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            z-index: 20;
            background: #000;
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-dash {
        .pc-footer {
            .footer-wrap {
                .footer-content {
                    & > div:nth-child(1) {
                        overflow: hidden;
                        word-wrap: break-word;
                        & > div:nth-child(odd) {
                            font-size: 12px;
                        }
                        & > div:nth-child(even) {
                            font-size: 12px;
                        }
                    }
                    & > div:nth-child(2) {
                        width: 55%;
                        & > div {
                            font-size: 14px;
                            .footer-link {
                                font-size: 12px;
                            }
                        }
                    }
                    & > div:last-of-type {
                        & > div {
                            img {
                                width: 100px;
                            }
                        }
                        .gzh {
                            font-size: 12px;
                            width: 100px;
                            float: right;
                        }
                    }
                }
            }
            .copy-right {
                color: #666666;
                text-align: center;
                padding: 24px 0;
                font-size: 14px;
                font-family: 'MSJH';
            }
        }

        .login-mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            z-index: 20;
            background: #000;
        }
    }
}
</style>